<template>
    <div class='login'>
        <div class='right'>
            <div class='title'>
                <span class='__main_text'>欢迎登录</span>
                <span class='__litle_text'>Welcome to login as a unified user</span>
            </div>
            <div class='form_div'>
                <el-form
                    :model='dataForm'
                    :rules='dataRule'
                    ref='dataForm'>
                    <div class='lable'>帐号:</div>
                    <el-form-item prop='userName'>
                        <el-input
                            v-model='dataForm.userName'
                            maxlength='10'
                            placeholder='请输入帐号'
                        ></el-input
                        >
                    </el-form-item>
                    <div class='lable'>密码:</div>
                    <el-form-item prop='password'>
                        <el-input
                            v-model='dataForm.password'
                            maxlength='8'
                            type='password'
                            placeholder='请输入密码（格式：必须包含英文和数字）'
                        ></el-input>
                    </el-form-item>
                    <div class='lable'>验证码:</div>
                    <el-form-item prop='captcha'>
                        <div class='code'>
                            <div class='code-left'>
                                <el-input
                                    v-model='dataForm.captcha'
                                    placeholder='请输入验证码'
                                ></el-input>
                            </div>
                            <div class='code-right'><img :src='code.image' @click='getCode()' alt='验证码...' /></div>
                        </div>
                    </el-form-item>
                    <el-form-item
                    >
                        <el-button style='width: 4.85rem;' size='large' type='primary' @click='dataFormSubmit()'>登录
                        </el-button>
                    </el-form-item
                    >
                </el-form>
            </div>
            <div class='checkbox'>
                <el-checkbox v-model='checked'>记住密码</el-checkbox>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'login',
    data() {
        return {
            title: window.SITE_CONFIG.sysName,
            checked: false,
            dataForm: {
                userName: '',
                password: '',
                captcha: '',
            },
            dataRule: {
                userName: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])/,
                        message: '您的密码格式不正确，请重新输入',
                        trigger: 'blur',
                    },
                ],
                captcha: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur',
                    },
                ],
            },
            code: {
                image: '',
                uuid: '',
            },
        };
    },
    created() {
        sessionStorage.clear();
        this.$cookie.delete('token');
        this.getUserInfo();
    },
    beforeMount() {
        this.getCode();
    },
    mounted() {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.urlPush);
    },
    methods: {
        // 提交表单
        dataFormSubmit() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    this.$cookie.set('token', 111111);
                    this.setUserInfo();
                    this.$router.replace({ name: 'helloWorld' });
                    // this.$http({
                    //     url: `/login`,
                    //     method: 'post',
                    //     data: {
                    //         userName: this.dataForm.userName,
                    //         password: this.encryption(this.dataForm.password),
                    //         captcha: this.dataForm.captcha,
                    //         uuid: this.code.uuid,
                    //     },
                    // }).then(res => {
                    //     console.log(res);
                    //     if (res && res.code == 200) {
                    //         this.$router.replace({ path: '/helloWorld' });
                    //     } else {
                    //         this.getCode();
                    //         this.$message.error(res.msg);
                    //     }
                    // });
                }
            });
        },

        //存储用户信息
        setUserInfo() {
            if (this.checked) {
                this.$cookie.set('username', this.dataForm.userName);
                this.$cookie.set('password', this.dataForm.password);
            } else {
                this.$cookie.set('username', '');
                this.$cookie.set('password', '');
            }
        },

        //获取存储的用户信息
        getUserInfo() {
            this.dataForm.userName = this.$cookie.get('username');
            this.dataForm.password = this.$cookie.get('password');
            if (this.dataForm.userName !== '' && this.dataForm.userName !== null) {
                this.checked = true;
            }
        },

        // 获取验证码
        getCode() {
            this.$http({
                url: `/code`,
                method: 'get',
            }).then(res => {
                console.log(res);
                if (res && res.code == 200) {
                    this.code = {
                        image: 'data:image/gif;base64,' + res.img,
                        uuid: res.uuid,
                    };
                } else {
                    this.$message.error(res.msg);
                }
            });
        },

        //密码加密
        encryption(pwd) {
            var content = '';
            for (let x in pwd) {
                let u = pwd.charCodeAt(x);
                content += String(u * (x + 1) + 111) + '-';
            }
            return content.substr(0, content.length - 1);
        },

        urlPush() {
            history.pushState(null, null, document.URL);
        },
    },
};
</script>
<style lang='scss' scoped>
.login {
    display: flex;
    background: url('./image/background.png') no-repeat fixed;
    background-size: cover;
    align-items: center;
    justify-content: flex-end;
    width: 100vw;
    height: 100vh;

    .right {
        z-index: 9999;
        width: 4.85rem;
        height: 5.36rem;
        min-height: 300px;
        min-width: 260px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.04), 0px 9px 28px 0px rgba(0, 0, 0, 0.04),
        0px 6px 16px -8px rgba(0, 0, 0, 0.08), inset 0px 0px 240px 0px rgba(255, 255, 255, 0.88),
        inset 0px 0px 120px 0px rgba(255, 255, 255, 0.88), inset 0px 0px 0px 0px #ffffff;
        border-radius: 8px;
        margin-right: 1.47rem;
        padding: 0.72rem 0.64rem 0.72rem 0.64rem;

        .title {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .__main_text {
                font-size: 0.32rem;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #175ceb;
            }

            .__litle_text {
                font-size: 0.16rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.4);
                margin-top: 0.12rem;
            }
        }

        .checkbox {
            text-align: left;
            margin-top: -0.2rem;
        }

        ::v-deep .el-checkbox__label {
            font-size: 0.14rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.64);
            line-height: 0.14rem;
        }

        .form_div {
            margin-top: 0.74rem;

            .lable {
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.88);
                line-height: 0.14rem;
                text-align: left;
                margin-bottom: 0.08rem;
            }

            ::v-deep .el-form-item__label {
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.88);
                line-height: 0.14rem;
                margin-bottom: 0.08rem;
            }

            ::v-deep .el-form-item {
                margin-bottom: 0.32rem;

            }

            ::v-deep .el-input__inner {
                background: rgba(255, 255, 255, 0.88);
                border-radius: 4px;
                border: 1px solid #E9EBED;
                height: 0.4rem;

                &::placeholder {
                    font-size: 0.14rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.16);
                    line-height: 0.14rem;
                }

                &::-webkit-input-placeholder {
                    /* WebKit browsers 适配谷歌 */
                    font-size: 0.14rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.16);
                    line-height: 0.14rem;
                }

                &:-moz-placeholder {
                    /* Mozilla Firefox 4 to 18 适配火狐 */
                    font-size: 0.14rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.16);
                    line-height: 0.14rem;
                }

                &::-moz-placeholder {
                    /* Mozilla Firefox 19+ 适配火狐 */
                    font-size: 0.14rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.16);
                    line-height: 0.14rem;
                }

                &:-ms-input-placeholder {
                    /* Internet Explorer 10+  适配ie*/
                    font-size: 0.14rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.16);
                    line-height: 0.14rem;
                }
            }

            ::v-deep .el-input {
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 0.14rem;
            }

            ::v-deep .el-button {
                background: #175ceb;
                border-radius: 2px;
                height: 0.48rem;
                font-size: 0.18rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 0.18rem;
            }


            .code-left {
                float: left;
                width: 70%;
            }

            .code-right {
                align-items: center;

                img {
                    margin-left: 0.1rem;
                    width: 1.31rem;
                    height: 0.4rem;
                }
            }
        }
    }
}
</style>
